<template>
  <view class="mxp-tag-title" :class="[cusClass]" :style="[cusStyle]">
    <view class="left-box">
      <slot name="bar">
        <view class="bar" :style="newBarStyle"></view>
      </slot>
      <slot name="title">
        <text class="title" :style="newTitleStyle">{{ title }}</text>
      </slot>
    </view>
    <slot name="right"></slot>
  </view>
</template>

<script setup lang="ts">
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { type CSSProperties, type PropType, computed } from 'vue';
  import type { $AllColorStr, $AllSizeUnitStr, $ColorType, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { defThemeColor } from '../mxp-tool/theme/theme';

  defineOptions({
    name: 'mxp-tag-title',
  });
  const props = defineProps({
    /** 标题 */
    title: { type: [String, Number], default: '' },
    /** 按钮的预置样式支持 "error" | "info" | "primary" | "success" | "warning" 和自定义的颜色（支持渐变色） 如#ff0000 */
    barColor: { type: String as PropType<$AllColorStr | $ColorType>, default: 'primary' },
    /** 按钮形状，circle(两边为半圆)，square(带圆角) */
    barWidth: { type: String as PropType<$SizeUnitStr>, default: '4px' },
    /** 按钮形状，circle(两边为半圆)，square(带圆角) */
    barHeight: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** 按钮形状，circle(两边为半圆)，square(带圆角) */
    barMarginRight: { type: String as PropType<$SizeUnitStr>, default: '10px' },
    /** 是否粗体 */
    bold: { type: Boolean, default: false },
    /** 标题文字大小 */
    fontSize: { type: String as PropType<$AllSizeUnitStr>, default: '14px' },
    /** 标题颜色 */
    color: { type: String as PropType<$AllColorStr>, default: '#333333' },
    ...publicStyeProps, // 混淆props共有参数
  });
  defineSlots<{
    /** 自定义 bar */
    bar: () => void;
    /** 右边内容 */
    right: () => void;
    /** 自定义标题 */
    title: () => void;
  }>();
  const newBarStyle = computed<CSSProperties>(() => {
    const stye = {
      background: props.barColor in defThemeColor.value ? defThemeColor.value[props.barColor as $ColorType] : (props.barColor as $AllColorStr),
      width: props.barWidth,
      height: props.barHeight,
      marginRight: props.barMarginRight,
    };
    return stye;
  });

  const newTitleStyle = computed<CSSProperties>(() => {
    const obj: CSSProperties = {
      fontSize: props.fontSize,
      color: props.color,
      fontWeight: props.bold ? 'bold' : 'normal',
    };
    return obj;
  });
</script>

<style scoped lang="scss">
  .mxp-tag-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 0;

    .left-box {
      display: flex;
      flex: 1;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
    }
  }
</style>
